<%--
  Created by IntelliJ IDEA.
  User: 44321
  Date: 2020/4/20
  Time: 9:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="js/vue.min.js"></script>
    <script src="js/jquery-3.4.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>

    <div id="app">
        <el-table
                :data="tableData"
                stripe
                style="width: 100%">
            <el-table-column
                    prop="userId"
                    label="用户编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="用户名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="loginName"
                    label="登录名">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="角色"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="showRoles(scope.row)" type="text" size="small">查看角色</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="职位"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="showPosts(scope.row)" type="text" size="small">查看职位</el-button>
                </template>
            </el-table-column>
        </el-table>

        <%--角色对话框--%>
        <el-dialog title="查看角色" :visible.sync="dialogTableVisible">
            <el-table :data="roleData">
                <el-table-column property="roleId" label="角色编号" width="150"></el-table-column>
                <el-table-column property="roleName" label="角色名称" width="200"></el-table-column>
            </el-table>
        </el-dialog>


    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                tableData: [],
                //角色对话框的数据
                roleData: [],
                //是否显示角色对话框
                dialogTableVisible: false,
            },
            methods: {
                queryAllUser(){
                    var that = this;
                    $.ajax({
                        url: '/queryAllUser',
                        type: 'get',
                        success:function(data){
                            that.tableData = data;
                        }
                    })
                },
                showRoles(value){
                    console.log(value);
                    //显示角色对话框
                    this.dialogTableVisible = true;
                    this.roleData = value.roles;

                },
                showPosts(value){
                    console.log(value);
                }

            },
            mounted: function(){
                this.queryAllUser();

            }
        })
    </script>

</body>

</html>
